/* eslint-disable no-unused-vars */
/* eslint-disable react/react-in-jsx-scope */
import { useHistory } from 'react-router-dom'
import { NavBar } from 'antd-mobile'

import styles from './index.module.scss'
import { Article } from '@/types/data'
import { useEffect, useState } from 'react'
import { getResult } from '@/store/actions/search'
import ArticleItem from '@/pages/Home/components/ArticleItem/ArticleItem'

const Result = () => {
  const history = useHistory()
  const [articles, setArticles] = useState<Article[]>([])
  // 1.获取查询参数
  const keyword = new URLSearchParams(history.location.search).get('keyword')
  // console.log('查询keyword', keyword)
  useEffect(() => {
  // 2. 发请求
    const fetchResult = async () => {
      if (keyword) {
        const res = await getResult(keyword!)
        console.log('searchResult', res.data.data.results)
        setArticles(res.data.data.results)
      }
    }
    fetchResult()
  }, [keyword])

  return (
    <div className={styles.root}>
      <NavBar onBack={() => history.go(-1)}>搜索结果</NavBar>
      <div className="article-list">
      {
          articles.map(it => (<div className="article-item" key={it.art_id}>
            <ArticleItem article={it}/>
          </div>))
        }
      </div>
    </div>
  )
}

export default Result
